<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表</title>
    <link rel="stylesheet" href="../public/css/index.css">
</head>
<body>
    <ul >
        
        <!-- <li>
            <h1>是的，世界仍然对中国科技保持开放</h1>
            <div class="imgs">
                <img src="https://05imgmini.eastday.com/mobile/20201029/20201029182531_a13898c4218a41587253e3b5443b537c_1_mwpm_03200403.jpg" alt="">
                <img src="http://05imgmini.eastday.com/mobile/20201029/20201029182531_a13898c4218a41587253e3b5443b537c_3_mwpm_03200403.jpg" alt="">
                <img src="http://05imgmini.eastday.com/mobile/20201029/20201029182531_a13898c4218a41587253e3b5443b537c_2_mwpm_03200403.jpg" alt="">
            </div>
            <div class="others">
                <div>
                    <span>动点科技</span><span>2020-10-29 18:25</span>
                </div>
                <div class="close">
                    <span>x</span>
                </div>
               
            </div>
        </li> -->
    </ul>
</body>
<script src="../public/js/jquery-3.4.1.js"></script>
<!-- <script src="../public/js/ejs.js"></script> -->
<script >
    $.ajax({
        type: "get",
        url: "http://v.juhe.cn/toutiao/index",
        data: {
            type:'top',
            key:'807f10d5da886d846acdde0d7c34024d'
        },
        dataType: "json",
        success: function (response) {
            console.log(response);
            formatData(response)
        },
        error:function(code,err){
            console.log(`code = ${code}`);
            console.log(`err = ${err}`);
        }
    });

    function formatData(response){
        let str = ``;
        response.result.data.forEach((item,index)=>{
            str+=`
             <li onclick="goToDetail('${item.url}')">
            <h1>${item.title}</h1>
            <div class="imgs">
                <img src="${item.thumbnail_pic_s}" alt="">
                <img src="${item.thumbnail_pic_s02}" alt="">
                <img src="${item.thumbnail_pic_s03}" alt="">
            </div>
            <div class="others">
                <div>
                    <span>${item.author_name}</span><span>${item.date}</span>
                </div>
                <div class="close">
                    <span>x</span>
                </div>
               
            </div>
        </li>
            `
        })

        document.querySelector('ul').innerHTML=str
    }

    function goToDetail(url){
        // location.href=url
        window.location.href=url
    }
</script>
</html>